<template>
	<view>
		<view class="content">
			<view class="top">
				<view class="list border">
					<text>类型</text>
					<view class="right">
						<text>
							<picker @change="examinationType" :range="Type">
								<label class="">{{ Type[Index] }}</label>
							</picker>
						</text>
						<image src="../../static/img/wjm_rightgo.png" mode=""></image>
					</view>
				</view>
				<view class="list border">
					<text>状态</text>
					<view class="right">
						<text>
							<picker @change="stateChange" :range="state">
								<label class="">{{ state[stateIndex] }}</label>
							</picker>
						</text>
						<image src="../../static/img/wjm_rightgo.png" mode=""></image>
					</view>
				</view>
				<view class="list border">
					<text>报修地址</text>
					<view class="right">
						<input type="text" v-model="address" placeholder="请填写报修地址" />
						<image src="../../static/img/wjm_rightgo.png" mode=""></image>
					</view>
				</view>
				<view class="list">
					<text>联系电话</text>
					<view class="right">
						<input type="text" v-model="tel" placeholder="13683246527" />
						<image src="../../static/img/wjm_rightgo.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="center">
				<!-- <input type="text" placeholder="请输入报修问题,以便尽快为您解决问题" /> -->
				<textarea v-model="content" placeholder="请输入报修问题,以便尽快为您解决问题" />
			</view>
			<view class="img">
				<!-- <view class=""> -->
				<image @tap="upload" src="../../static/img/wjm_photo.png" mode=""></image>
				<!-- </view> -->
				<view class="tupian1" v-for="item in photo">
					<image :src="item" mode=""></image>
				</view>
			</view>
			<view class="btn" @click="get">
				确认报修
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Repairs
	} from "../../static/api/apis.js"

	export default {
		data() {
			return {
				Type: ['请选择维修类型'],
				state: ['请选择维修状态'],
				Index: 0,
				stateIndex: 0,
				tel: '',
				address: "",
				photo: [],
				totalImg: [],
				content: '',
			}
		},
		methods: {
			// 点击提交
			async get() {
				 if(this.content==''){
					 uni.showToast({
					 	title:'请填写报修内容',
					 	icon:'error'
					 })
				 }else{
					 let res = await Repairs.add({
					 	id: 0,
					 	address: this.address,
					 	content: this.content,
					 	tel: this.tel,
					 	type: this.Index,
					 	state: this.stateIndex,
					 	images: this.totalImg
					 })
					 console.log(res)
					 if(res.errCode==10000){
					 	uni.showToast({
					 		title:'添加成功',
					 		icon:'success'
					 	})
					 }
					 setTimeout(()=>{
					 	uni.navigateTo({
					 		url:'list'
					 	})
					 },2000)
					 
				 }
				 
				 if(this.address==''){
					 uni.showToast({
					 	title:'请填写报修地址',
					 	icon:'error'
					 })
				 }else if (this.tel==''){
					 uni.showToast({
					 	title:'请填写联系电话',
					 	icon:'error'
					 })
				 }
				 console.log(this.Index)
				 if(this.Index==0){
					 uni.showToast({
					 	title:'请选择维修类型',
						icon:'error'
					 })
				 }else if(this.stateIndex==0){
					 uni.showToast({
					 	title:'请选择维修状态',
						icon:'error'
					 })
				 }
				
			},
			// 文件上传
			upload() {
				uni.chooseImage({
					count: 3,
					sizeType: ['original'], //可以指定是原图还是压缩图。或者二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						uni.showLoading({
							title: '上传中'
						})
						let filepath = res.tempFilePaths;
						if (this.photo.length < 3) {
							for (let i = 0; i < filepath.length; i++) {
								uni.uploadFile({
									url: 'http://121.42.230.80/api/mini/upload',
									filePath: filepath[i],
									name: 'file',
									formData: {
										'user': 'test'
									},
									success: (uploadFileRes) => {
										let img = uploadFileRes.data
										this.photo.unshift(img)
										let arr = []
										//循环追加数组
										for (var i = 0; i < this.photo.length; i++) {
											arr.push({
												'url': this.photo[i]
											})
										}
										this.totalImg = arr
										uni.hideLoading() //隐藏加载弹框
										uni.showToast({
											title: "上传成功",
											icon: 'success',

										})
									}
								})
							}
						}
						// uni.hideLoading()
					}
				})
			},
			// 维修类型
			async type() {
				let res = await Repairs.Type()
				if (res.errCode == 10000) {
					res.data.list.forEach((item) => {
						this.Type.push(item.name)
					})
				}
			},
			// 状态
			async State() {
				let res = await Repairs.State()
				console.log(res)
				if (res.errCode == 10000) {
					res.data.list.forEach((item) => {
						this.state.push(item.name)
					})
				}
			},
			examinationType(e) {
				this.Index = e.target.value;
			},
			stateChange(e) {
				this.stateIndex = e.target.value
			}
		},
		onLoad() {
			this.type()
			this.State()

		}
	}
</script>

<style lang="less" scoped>
	@import url("../../static/css/Repairs/index.less");
</style>
